<template>
    <div class="conbox">
        <div class="head-box">
            <ul>
                <li class="lifirst">账户变动原因</li>
                <li class="lisecond">可用余额(元)</li>
                <li class="lisecond">冻结金额(元)</li>
            </ul>
        </div>
        <div class="cashlist">
            <ul class="centerul">
                <li v-for="(item,index) in list.data" :key="index">
                    <div class="lifirst">
                        <p class="reson">{{item.change_desc}}</p>
                        <p class="recharge">{{item.change_type}}</p>
                        <p>{{item.change_time}}</p>
                    </div>
                    <div class="lisecond reson">{{item.user_money}}</div>
                    <div class="lisecond reson">{{item.frozen_money}}</div>
                </li>
                <AppWrapperEmpty
                    type="noData"
                    :finished="list.finished"
                    :is-loading="list.loading"
                    :is-empty="$util.isEmpty(list.data)"
                />
            </ul>
        </div>
    </div>
</template>

<script>
import { getcashlist } from '@/api/payment'
import { list } from '@/mixins'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
export default {
	name: 'CashDetails',
	components: {
		AppWrapperEmpty
	},
	mixins: [list],
	data() {
		return {
			query: {}
		}
	},
	onLoad(val) {
		this.query = val
	},
	mounted() {
		this.init()
	},
	onPullDownRefresh() {
		this.resetList()
		this.init().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.data.length < this.list.total) {
			this.init().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	methods: {
		init() {
			this.list.limit = 10
			return getcashlist({
				ru_id: this.query.owner_user_id,
				size: this.list.limit,
				page: this.list.page
			}).then(res => {
				this.completes(res)
			})
		}
	}
}
</script>

<style scoped>
    .head-box {

        line-height: 90px;
        font-size: 24px;
        text-align: left;
    }
    .head-box ul{
        width: 100%;
        height: 100%;
        float: left;
        background-color: #F5F5F5;
    }
    .head-box ul li{
        float: left;
        color: #999999;
    }
    .head-box ul .lifirst{
        text-indent: 30px;
    }
    .lifirst{
        float: left;
        width: 40%;
        font-size: 24px;
    }
    .lisecond{
        float: left;
        width: 30%;
        text-align: center;
    }
    .cashlist{
        width: 100%;
        height: auto;
        background: white;
        top: 90px;
        float: left;
        position: absolute;
    }
    .cashlist ul{
        width: 100%;
        height: auto;
        display: block;
    }
    .cashlist ul li{
        padding: 20px;
        height: 230px;
        width: 91%;
        /*float: left;*/
        margin-left: 3%;
        border-bottom: 1px solid #eeeeee;
    }
    .cashlist ul li:last-child{
        border: none;
    }
    .reson{
        font-size: 34px;
    }
    .recharge{
        margin-top: 20px;
    }
    .lifirst p:nth-child(3){
        color:#999999;
        margin-top: 10px;
    }
</style>
